マウスカーソルの縦横にラインを引く
今回は、マウスカーソルの縦横にラインを引く方法を紹介します。といっても、どんなテクニックなのか想像しにくいかもしれませんね。まずは、サンプルページを見てテクニックの概要を把握してください。製図で使用するドラフターのような演出を確認できると思います。

→ ラインの画像を用意する
 
まずは、マウスカーソルと一緒に移動するライン用に、縦横1ピクセルの画像を用意します。色は何色でも構いませんが、この画像の色がラインの色となるので、ページの雰囲気に合う色を指定してください。続いて、BODYタグのすぐ下に、この画像を2回配置します。IMGタグでは、それぞれにid属性で別の名前を付け、縦横1ピクセル、絶対配置のスタイルシートを指定します。
<BODY>
<IMG src="line.gif" id="yoko" style="position:absolute; width:1px; height:1px">
<IMG src="line.gif" id="tate" style="position:absolute; width:1px; height:1px">


→ BODYタグにonmousemoveイベントを追加し、ページの余白を0にする
 
続いて、BODYタグにonmousemoveイベントを追加し、マウスが動いた際にJavaScript関数「drawline()」を呼び出します。ちなみに、この関数はラインを描画するための関数となります。また、「margin:0; padding:0」のスタイルシートでBODYの余白を0にしておきます。
<BODY onmousemove="drawline()" style="margin:0; padding:0">
<IMG src="line.gif" id="yoko" style="position:absolute; width:1px; height:1px">
<img src="line.gif" id="tate" style="position:absolute; width:1px; height:1px">


→ ラインを描画するJavaScriptを自作する
 
最後に、ラインを描画するJavaScript関数「drawline()」を自作すれば、テクニックが完成します。この関数では、マウスのY座標を示す「event.y」を、画像のY座標に指定します（1行目）。さらに、画像の幅をBODYの幅と同じに指定することで横のラインを描画します（2行目）。同様にして、3〜4行目では縦のラインを描画しています。なお、「clientWidth」と「clientHeight」は、Internet Explorer専用のプロパティとなります。このため、Netscapeでは今回紹介したテクニックが機能しません。注意してください。
<SCRIPT language="JavaScript">
<!--
function drawline(){
document.getElementById('yoko').style.pixelTop = event.y;
document.getElementById('yoko').style.width = document.body.clientWidth;
document.getElementById('tate').style.pixelLeft = event.x;
document.getElementById('tate').style.height = document.body.clientHeight;
}
// -->
</SCRIPT>


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��